<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="model/boardModel">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <title>店员服务费审批</title>

</head>
<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('店员服务费审批','店员服务费审批')"></div>
</div>

<div th:fragment="content" th:remove="tag">

    <div class="row">
        <div class="col-xs-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">查询条件</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form role="form" id="queryForm" th:action="@{/cash/list}" method="post" >
                    <div class="box-body">
                        <div class="row">
                            <input type="hidden" id="status" th:name="status" value="1"/>
                            <div class="col-xs-3">
                                <input type="text" th:name="empName"  class="form-control input-sm" placeholder="账户名"/>
                            </div>
                            <div class="col-xs-3">
                                <input type="text" th:name="phone" class="form-control input-sm" placeholder="手机号"/>
                            </div>
                            <div class="col-xs-3">
                                <input type="text" th:name="storeName" class="form-control input-sm" placeholder="所属门店"/>
                            </div>

                            <div class="col-xs-3">
                                <button id="btn-query" type="button" class="btn btn-primary pull-right btn-sm">查询</button>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">

                    </div>
                </form>
            </div>

            <ul id="myTab" class="nav nav-tabs">
                            <li class="active">
                                <a href="#home" data-toggle="tab" >待审核</a>
                            </li>
                            <li><a href="#ios" data-toggle="tab">已通过</a></li>
                            <li><a href="#jmeter" data-toggle="tab">未通过</a></li>
            </ul>

            <div id="myTabContent" class="tab-content">
                <div class="box tab-pane fade in active" id="home">
                    <div class="box-body">
                        <table id="dataTable" class="table table-striped table-bordered table-hover table-condensed">
                            <thead >
                            <tr>
                                <th><input name="select_all" value="1" id="example-select-all1" type="checkbox" /></th>
                                <th>提现流水号</th>
                                <th>账户名</th>
                                <th>手机号码</th>
                                <th>所属门店</th>
                                <th>申请金额</th>
                                <th>申请时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="box tab-pane fade in" id="ios">
                    <div class="box-body">
                        <table id="dataTable1" class="table table-striped table-bordered table-hover table-condensed">
                            <thead >
                            <tr>
                                <th><input name="select_all" value="1"  type="checkbox" /></th>
                                <th>提现流水号</th>
                                <th>账户名</th>
                                <th>手机号码</th>
                                <th>所属门店</th>
                                <th>申请金额</th>
                                <th>申请时间</th>
                                <th>支付状态</th>
                                <th>支付流水号</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="box tab-pane fade in" id="jmeter">
                    <div class="box-body">
                        <table id="dataTable2" class="table table-striped table-bordered table-hover table-condensed">
                            <thead >
                            <tr>
                                <th><input name="select_all" value="1" id="example-select-all" type="checkbox" /></th>
                                <th>提现流水号</th>
                                <th>账户名</th>
                                <th>手机号码</th>
                                <th>所属门店</th>
                                <th>申请金额</th>
                                <th>申请时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!--图片信息 -->
    <div class="modal fade" id="payModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header" style="background-color: #307095;">
                    <button type="button" class="close" data-dismiss="modal" id="btn_close" >
                        <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel2">订单—支付</h4>
                </div>

                <div class="modal-body">
                    <form class="form-horizontal"  id="payForm"  method="post">
                        <input type="hidden" id="cashId"  th:name="cashId"/>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">付款码：</label>
                            <div class="col-sm-9">
                                <img id="showImage" src="" height="200" width="200"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <span><code><strong>注：</strong>请扫描上面的二维码，支付该订单。支付完成后点击支付完成按钮，完成对订单的支付。</code></span>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="btn-submit" class="btn btn-primary">支付完成</button>
                </div>
            </div>
        </div>
    </div>




    <!-- DataTables -->
    <script type="text/javascript">
        $(function tab1(){
            var tables = $("#dataTable").dataTable({
                serverSide: true,//分页，取数据等等的都放到服务端去
                processing: true,//载入数据的时候是否显示“载入中”
                pageLength: 10,  //首次加载的数据条数
                ordering: false,//排序操作在服务端进行，所以可以关了。
                /*pagingType: "full_numbers",*/
                autoWidth: false,
                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                searching: false,
                destroy: true,
                ajax: {   //类似jquery的ajax参数，基本都可以用。
                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                    url: "/cash/list",
                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                        var param = {}; //因为服务端排序，可以新建一个参数对象
                        param.draw = d.draw;
                        param.start = d.start;
                        param.length = d.length;
                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                        formData.forEach(function (e) {
                            if(e.name === 'status'){
                                param[e.name] = '1';
                            }else {
                                param[e.name] = e.value;
                            }
                        });
                        return param;//自定义需要传递的参数。
                    }
                },
                columns: [//对应上面thead里面的序列
                    {"data": null, "width": "50px"},
                    {"data": 'cashNo'}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列
                    {"data": 'empName'},
                    {"data": 'phone',defaultContent: ""},
                    {"data": 'storeName', defaultContent: ""},
                    {"data": 'applyMoney', defaultContent: ""},
                    {"data": 'createTime', defaultContent: ""},
                    {"data": null, "width": "140px"}
                ],
                /*<![CDATA[*/
                columnDefs: [
                    {
                        targets: -1,//编辑
                        data: null,//下面这行，添加了编辑按钮和，删除按钮
                        defaultContent: "<button id='dakuan' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>打款</button>"
                    },
                    {
                        'targets': 0,
                        'searchable':false,
                        'orderable':false,
                        'className': 'dt-body-center1',
                        'render': function (data, type, full, meta){
                            return '<input type="checkbox" name="id[]" value="'
                                + data.cashId + '" onclick="showCheck(value)">';
                        }
                    }
                ],
                dom: '<"toolbar1">frtip',
                /*]]>*/

                //每加载完一行的回调函数
                createdRow: function( row, data, index ) {
                    //修改单元格样式
                    //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                },
                initComplete: function (setting, json) {
                    //初始化完成之后替换原先的搜索框。
                },

                language: {
                    lengthMenu: "",//不显示记录条数选择
                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                    processing: "加载中",//处理页面数据的时候的显示
                    /*<![CDATA[*/
                    paginate: {//分页的样式文本内容。
                        previous: "<",
                        next: ">",
                        first: "<<",
                        last: ">>"
                    },
                    /*]]>*/
                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                    sSearch: "关键字："
                }

            });

            $("div.toolbar1").html('<button type="button" class="btn btn-primary pull-right btn-sm" id="btn-down" style="display: inline;width: 73.6px;height: 41.6px">批量通过</button>' +
                '<span type="text" class="pull-left" style="font-size:18px" th:text="${sum[0]}"></span>');

            //同意
            $("#dataTable tbody").on("click", "#editRow", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                $.ajax({
                    type: "POST",
                    url: "/wxPay/check",
                    data: {ids:data.cashId},
                    dataType: "json",
                    success: function(result){
                        if (result.result == 200) {
                            tables.api().row().remove().draw(false);
                            toastr.success(result.msg);

                        } else {
                            toastr.error(result.msg);
                        }
                    },
                    error:function () {
                        toastr.error("网络错误...");
                    }
                });
            });

            //不同意
            $("#dataTable tbody").on("click", "#editRow1", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                alert
                //failCheck
                $.ajax({
                    type: "POST",
                    url: "/wxPay/failCheck",
                    data: {id:data.cashId},
                    dataType: "json",
                    success: function(result){
                        if (result.result == 200) {
                            tables.api().row().remove().draw(false);
                            toastr.success(result.msg);

                        } else {
                            toastr.error(result.msg);
                        }
                    },
                    error:function () {
                        toastr.error("网络错误...");
                    }
                });
            });



            //批量通过
            $("#btn-down").on("click", function () {
                var id_array=new Array();
                $('input[name="id[]"]:checked').each(function(){
                    id_array.push($(this).val());//向数组中添加元素
                });
                var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符串
                if(idstr == ""){
                    toastr.error("请选择");
                }else {
                    $.ajax({
                        type: "POST",
                        url: "/wxPay/check",
                        data: {ids:idstr},
                        dataType: "json",
                        success: function(result){
                            if (result.result == 200) {
                                $('#dataTable').DataTable().ajax.reload();
                                toastr.success(result.msg);

                            } else {
                                toastr.error(result.msg);
                            }
                        },
                        error:function () {
                            toastr.error("网络错误...");
                        }
                    });
                }

            });
            // Handle click on "Select all" control
            $('#example-select-all1').on('click', function(){
                $('.dt-body-center1 input').prop('checked', this.checked);
            });


            //查询按钮
            $("#btn-query").on("click", function () {
                tables.fnDraw();
            });

            //打款
            $("#dataTable tbody").on("click", "#dakuan", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                $("#cashId").val(data.cashId);
                $("#showImage").attr("src",data.payImgUrl);
                $("#payModal").modal("show");

            });


        });
        $(function(){
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                // 获取已激活的标签页的名称
                var activeTab = $(e.target).text();
                if(activeTab === "待审核"){
                    //待审核
                    $('#dataTable').DataTable().ajax.reload();
                }else if(activeTab === "已通过"){
                    //审核成功
                    if($.fn.DataTable.isDataTable("#dataTable1")){
                        $('#dataTable1').DataTable().ajax.reload();
                    }else {
                        $(function (){
                            var tables = $("#dataTable1").dataTable({
                                serverSide: true,//分页，取数据等等的都放到服务端去
                                processing: true,//载入数据的时候是否显示“载入中”
                                pageLength: 10,  //首次加载的数据条数
                                ordering: false,//排序操作在服务端进行，所以可以关了。
                                /*pagingType: "full_numbers",*/
                                autoWidth: false,
                                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                                searching: false,
                                ajax: {   //类似jquery的ajax参数，基本都可以用。
                                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                                    url: "/cash/list",
                                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                                        var param = {}; //因为服务端排序，可以新建一个参数对象
                                        param.draw = d.draw;
                                        param.start = d.start;
                                        param.length = d.length;
                                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                                        formData.forEach(function (e) {
                                            if(e.name === 'status'){
                                                param[e.name] = '2';
                                            }else {
                                                param[e.name] = e.value;
                                            }
                                        });
                                        return param;//自定义需要传递的参数。
                                    }
                                },
                                columns: [//对应上面thead里面的序列
                                    {"data": null, "width": "50px"},
                                    {"data": 'cashNo'}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列
                                    {"data": 'empName'},
                                    {"data": 'phone',defaultContent: ""},
                                    {"data": 'storeName', defaultContent: ""},
                                    {"data": 'applyMoney', defaultContent: ""},
                                    {"data": 'createTime', defaultContent: ""},
                                    {"data": 'payResultName', defaultContent: ""},
                                    {"data": 'payNo', defaultContent: ""}

                                ],
                                /*<![CDATA[*/
                                columnDefs: [
                                    {
                                        targets: -0,//编辑
                                        data: null,//下面这行，添加了编辑按钮和，删除按钮
                                        defaultContent: "<input type='checkbox'>"
                                    }
                                ],
                                dom: '<"toolbar2">frtip',
                                /*]]>*/

                                //每加载完一行的回调函数
                                createdRow: function( row, data, index ) {
                                    //修改单元格样式
                                    //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                                },
                                initComplete: function (setting, json) {
                                    //初始化完成之后替换原先的搜索框。
                                },

                                language: {
                                    lengthMenu: "",//不显示记录条数选择
                                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                                    processing: "加载中",//处理页面数据的时候的显示
                                    /*<![CDATA[*/
                                    paginate: {//分页的样式文本内容。
                                        previous: "<",
                                        next: ">",
                                        first: "<<",
                                        last: ">>"
                                    },
                                    /*]]>*/
                                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                                    //下面三者构成了总体的左下角的内容。
                                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                                    sSearch: "关键字："
                                }

                            });

                            $("div.toolbar2").html('<button type="button" class="btn btn-primary pull-right btn-sm" id="btn-down1" style="display: inline;width: 73.6px;height: 41.6px">批量通过</button>' +
                                '<span type="text" class="pull-left" style="font-size:18px" th:text="${sum[1]}"></span>');


                            //批量通过
                            $("#btn-down1").on("click", function () {
                                var data = tables.api().row().data();
                                var data1 = $(this).parents("tr");
                                // window.location.href='/account/infoToList/'+ data.accountId;
                            });

                            //查询按钮
                            $("#btn-query").on("click", function () {
                                tables.fnDraw();
                            });


                        })
                    }

                }else if(activeTab === "未通过"){
                    //审核失败
                    if($.fn.DataTable.isDataTable("#dataTable2")){
                        $('#dataTable2').DataTable().ajax.reload();
                    }else {
                        $(function (){
                            var tables = $("#dataTable2").dataTable({
                                serverSide: true,//分页，取数据等等的都放到服务端去
                                processing: true,//载入数据的时候是否显示“载入中”
                                pageLength: 10,  //首次加载的数据条数
                                ordering: false,//排序操作在服务端进行，所以可以关了。
                                /*pagingType: "full_numbers",*/
                                autoWidth: false,
                                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                                searching: false,
                                ajax: {   //类似jquery的ajax参数，基本都可以用。
                                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                                    url: "/cash/list",
                                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                                        var param = {}; //因为服务端排序，可以新建一个参数对象
                                        param.draw = d.draw;
                                        param.start = d.start;
                                        param.length = d.length;
                                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                                        formData.forEach(function (e) {
                                            if(e.name === 'status'){
                                                param[e.name] = '3';
                                            }else {
                                                param[e.name] = e.value;
                                            }
                                        });
                                        return param;//自定义需要传递的参数。
                                    }
                                },
                                columns: [//对应上面thead里面的序列
                                    {"data": null, "width": "50px"},
                                    {"data": 'cashNo'}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列
                                    {"data": 'empName'},
                                    {"data": 'phone',defaultContent: ""},
                                    {"data": 'storeName', defaultContent: ""},
                                    {"data": 'applyMoney', defaultContent: ""},
                                    {"data": 'createTime', defaultContent: ""},
                                    {"data": null, "width": "120px"}
                                ],
                                /*<![CDATA[*/
                                columnDefs: [
                                    {
                                        targets: -1,//编辑
                                        data: null,//下面这行，添加了编辑按钮和，删除按钮
                                        defaultContent: "<div class='btn-group'><button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>同意</button>"
                                    },
                                    {
                                        'targets': 0,
                                        'searchable':false,
                                        'orderable':false,
                                        'className': 'dt-body-center',
                                        'render': function (data, type, full, meta){
                                            return '<input type="checkbox" name="id[]" value="'
                                                + data.cashId + '" onclick="showCheck(value)">';
                                        }
                                    }
                                ],
                                dom: '<"toolbar3">frtip',
                                /*]]>*/

                                //每加载完一行的回调函数
                                createdRow: function( row, data, index ) {
                                    //修改单元格样式
                                    //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                                },
                                initComplete: function (setting, json) {
                                    //初始化完成之后替换原先的搜索框。
                                },

                                language: {
                                    lengthMenu: "",//不显示记录条数选择
                                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                                    processing: "加载中",//处理页面数据的时候的显示
                                    /*<![CDATA[*/
                                    paginate: {//分页的样式文本内容。
                                        previous: "<",
                                        next: ">",
                                        first: "<<",
                                        last: ">>"
                                    },
                                    /*]]>*/
                                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                                    //下面三者构成了总体的左下角的内容。
                                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                                    sSearch: "关键字："
                                }

                            });

                            $("div.toolbar3").html('<button type="button" class="btn btn-primary pull-right btn-sm" id="btn-down2" style="display: inline;width: 73.6px;height: 41.6px">批量通过</button>' +
                                '<span type="text" class="pull-left" style="font-size:18px" th:text="${sum[2]}"></span>');

                            /*<![CDATA[*/
                            //批量通过
                            $("#btn-down2").on("click", function () {
                                var id_array=new Array();
                                $('input[name="id[]"]:checked').each(function(){
                                    id_array.push($(this).val());//向数组中添加元素
                                });
                                var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符串
                                if(idstr == null){
                                    alert("请选择")
                                }
                                //$.post("/cash/check", {ids:idstr},alert(11));
                            });
                            // Handle click on "Select all" control
                            $('#example-select-all').on('click', function(){
                                $('.dt-body-center input').prop('checked', this.checked);
                            });
                            /*]]>*/

                            //查询按钮
                            $("#btn-query").on("click", function () {
                                tables.fnDraw();
                            });


                        })
                    }

                }
            });
        });
        function showCheck(value){
            console.log("123")
        }

        $("#btn-submit").click(function () {
            alert($("#payForm").serialize())
            $.ajax({
                url: '/wxPay/check',
                type: 'POST',
                data: $("#payForm").serialize(),
                dataType: "json",
                cache: "false",
                success: function (result) {
                    if (result.result == 200) {
                        $("#payModal").modal("hide");
                        toastr.success(result.msg);
                        $('#dataTable').DataTable().ajax.reload();
                    } else {
                        toastr.error(result.msg);
                    }
                },
                error: function (err) {
                    toastr.error("网络错误...");
                }
            });

        })


    </script>


</div>
</body>
</html>